<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title>GARMOR</title>
      <!-- don't forget to paste your page title! -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta name="description" content="" />
      <meta name="author" content="" />
      <!-- Le styles -->
      <!-- bootstrap framework styles -->
      <link href="css/bootstrap.css" rel="stylesheet" />
      <!-- fancybox lightbox clone plugin styles -->
      <link href="css/fancybox.css" rel="stylesheet" />
      <!-- icomoon icons font  -->
      <link href="css/icomoon.css" rel="stylesheet" />
      <!-- sequence slider styles -->
      <!--[if lt IE 8]>
      <link rel="stylesheet" type="text/css" media="screen" href="css/sequencejs_ie.css" />
      <![endif]-->
      <link rel="stylesheet" type="text/css" media="screen" href="css/sequencejs.css" />
      <!-- main template styles -->
      <link href="css/styles.css" rel="stylesheet" />
      <!-- place for your custom styles -->
      <link href="css/mystyle.css" rel="stylesheet" />
      <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
      <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->

   </head>
   <body class="">
      <!-- Backround image. Just paste yours. No extra code. Highly recommend to use your own images -->
      <!-- background images by Victor1558 under CC BY 2.0 license -> http://www.flickr.com/photos/76029035@N02/ -->
      <img src="img/bg14.jpg" id="bg_main" alt="" />
      <!--recommended image dimentions 1200x800px with weight under 120kb 
         !note! don't use very light images. It can damage readability of the white text -->
      <div class="container">
         <!-- Main navigation -->
         <div class="row">
            <div class="span12">
               <div class="navbar">
                  
               </div>
            </div>
         </div>
         <!-- /Main navigation -->
         <div class="row">
            <div class="span12">
               <!-- slideshow area -->
               <div class="sequence_slider">
                  <div id="header-container">
                     <div id="header">
                        <span class="prev"></span>
                        <span class="next"></span>
                        <div id="sequence">
                           <ul>
                              <li id="intro">
                                 <h5 class="title animate-in">Excelente calidad</h5>
                                 <p class="subtitle animate-in">
                                    Nos aseguramos de que cada uno de los servicios que proveemos tengan la m&aacute;s alta calidad para la satisfacci&oacute;n total del cliente.
                                  <br /><br />
                                    <!--<a href="#" class="btn btn-primary">Find more</a>-->
                                 </p>
                                 <img class="model animate-in" src="img/logo6.png" alt="Model 1" style="bottom: -35px;" />
                              </li>
                              <li id="creative">
                                 <h5 class="title">Personal experimentado</h5>
                                 <p class="subtitle animate-in">
                                    Contamos con personal altamente capacitado el cual cuenta con la experiencia necesaria para cumplir los requerimientos de su proyecto y sus expectativas.
                                  <br /><br />
                                    <!--<a href="#" class="btn btn-primary">Find more</a>-->
                                 </p>
                                 <img class="model" src="img/staff.png" alt="Model 2" />
                              </li>
                              <li id="support" class="frame3">
                                 <h5 class="title">Compromiso sin&eacute;rgico</h5>
                                 <p class="subtitle animate-in"> 
                                    Sabemos que es de vital importancia mantener una comunicaci&oacute;n activa con nuestros clientes y trabajar en conjunto, por lo mismo nos interesa que queden satisfechos con el resultado final del proyecto. 
                                    <br /><br />
                                    <!--<a href="#" class="btn btn-primary">Find more</a>-->
                                 </p>
                                 <img class="model" src="img/model_3.png" alt="Model 3" />
                              </li>
                           </ul>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- /slideshow area -->
            </div>
         </div>
         <section class="main">
            <h2>Bienvenido</h2>
            <div class="row">
               <div class="span4 block">
                  <!-- Video -->
                  <!-- paste here your video to involve your audence
                     !note! This video is only for demostration purpose. Don't use it in your actual website
                     video made by Microsoft Research -> https://vimeo.com/msradesignteam -->
                  <!--<a href="http://player.vimeo.com/video/39564783?title=0&amp;byline=0&amp;portrait=0&amp;color=00aaff&amp;autoplay=1" class="various iframe hover_image" id="example1">
                  <span class="icomoon-movie icon_hover icon_visible">Play Video</span>-->
                  <span class="mask"></span>
                  <img src="img/garmor_helmet.jpg" alt="" class="left" />
                  </a>
               </div>
               <div class="span5">
                  <p>
                     <big> 
                        Construcciones GARMOR ofrece  servicios integrales de contrucción, remodelaciones y administración de obra, con una gran experiencia en el ramo, apoyando a diferentes compañias.
                     </big>
                  </p>
                  <p>
                     <big> 
                        Contamos con personal experimentado y la infraestructura necesaria para ofrecer servicios de excelente calidad, ademas de estar asociados con diferentes empresas con el compromiso de hacer sinergias.
                     </big>
                  </p>
               </div>
            </div>
         </section>
         
         <section class="main">
            <h2>Nuestro trabajo <small><a href="projects.html">Explore nuestros proyectos</a></small> </h2>
            <div class="row">
               <!-- latest work area -->
               <div class="span3" id="proj1">
                  <!-- portfolio item -->
                  <a id="proj1Link" href="project1.html" class="hover_image hover_image_project  block">
                     <img id="proj1Src" src="img/tkt_six.png" alt="" />
                     <span class="icomoon-anchor icon_hover"></span>
                     <span class="mask"></span>
                     <div class="desc">
                        <h5 id="proj1Title">Proyecto solidaridad TKT SIX</h5>
                        <p id="proj1Desc">Servicios: Construcci&oacute;n total, remodelaciones y expansi&oacute;n </p>
                     </div>
                  </a>
               </div>
               <div class="span3" id="proj2">
                  <!-- portfolio item -->
                  <a id="proj2Link" href="project2.html" class="hover_image hover_image_project  block">
                     <img id="proj2Src" src="img/apodaca.jpg" alt="" />
                     <span class="icomoon-anchor icon_hover"></span>
                     <span class="mask"></span>
                     <div class="desc">
                        <h5 id="proj2Title">Obra particular</h5>
                        <p id="proj2Desc">Servicios: Construcci&oacute;n Total, apoyo en la administraci&oacute;n y coordinaci&oacute;n con proveedores </p>
                     </div>
                  </a>
               </div>
               <div class="span3" id="proj3">
                  <!-- portfolio item -->
                  <a id="proj3Link" href="project3.html" class="hover_image hover_image_project  block">
                     <img id="proj3Src" src="img/zona_noreste.jpg" alt="" />
                     <span class="icomoon-anchor icon_hover"></span>
                     <span class="mask"></span>
                     <div class="desc">
                        <h5 id="proj3Title">desarrollo de negocios propios</h5>
                        <p id="proj3Desc">Servicios: Construcci&oacute;n Total, apoyo en la administraci&oacute;n y coordinaci&oacute;n con proveedores </p>
                     </div>
                  </a>
               </div>
               <div class="span3" id="proj4">
                  <!-- portfolio item -->
                  <a id="proj4Link" href="project4.html" class="hover_image hover_image_project block">
                     <img id="proj4Src" src="img/plano.jpg" alt="" />
                     <span class="icomoon-anchor icon_hover"></span>
                     <span class="mask"></span>
                     <div class="desc">
                        <h5 id="proj4Title">Obra particular</h5>
                        <p id="proj4Desc">Servicios: Construcci&oacute;n parcial, remodelaciones y coordinaci&oacute;n de servicios </p>
                     </div>
                  </a>
               </div>
            </div>
         </section>
         <section class="main">
            <!-- main footer -->
            <footer class="main">
               <div class="row">
                  <div class="span8">
                     <!-- footer main nav -->
                     <nav>
                        <ul>
                           <li><a href="index.html">Inicio</a></li>
                           <li><a href="projects.html">Proyectos</a></li>
                           <li><a href="clients.html">Clientes</a></li>
                           <li><a href="about.html">Nosotros</a></li>
                           <li><a href="services.html">Servicios</a></li>
                           <li><a href="catalog.html">Cat&aacute;logo</a></li>
                           <li><a href="contact.html">Contacto</a></li>
                        </ul>
                     </nav>
                  </div>
                  <div class="span4">
                     <small>© <a href="index.html">Garmor</a> 2012</small>
                  </div>
               </div>
            </footer>
         </section>
      </div>
      <!-- /container --><!-- Le javascript
         ================================================== -->
      <!-- Placed at the end of the document so the pages load faster -->
      <script src="js/jquery.js"></script>
      <!-- Bootstrap Framework script -->
      <script src="js/bootstrap.js"></script>
      <script> $(function() { $('.carousel').carousel() }); </script>
      <script type="text/javascript">
         $("[rel=tooltip]").tooltip();
      </script>
      <!-- plugin for background images -->
      <script src="js/bg_image.js"></script>
      <!-- Fancybox plugin -->
      <script type="text/javascript" src="js/fancybox.js"></script>
      <script type="text/javascript" src="js/navbar.js"></script>
      <script type="text/javascript">
         $(".index").addClass('active');
      </script>
      <script type="text/javascript">
         $(document).ready(function() {
         	/*
         	*   Examples - images
         	*/
         
         	$("a#example1").fancybox({
         		'padding'		    : '0',
         		'transitionIn'	: 'fade',
         		'transitionOut'	: 'fade',
         		'overlayColor' : '#000',
         		'showNavArrows' : false,
         		'titlePosition'		: 'outside',
         		'overlayOpacity' : 0.7,
         		'width'		: 960,
         		'height' : 540
         
         	});
         
         	$("a#example2").fancybox({
         		'overlayShow'	: false,
         		'transitionIn'	: 'elastic',
         		'transitionOut'	: 'elastic'
         	});
         
         	$("a#example3").fancybox({
         		'transitionIn'	: 'none',
         		'transitionOut'	: 'none'	
         	});
         
         	$("a#example4").fancybox({
         		'opacity'		: true,
         		'overlayShow'	: false,
         		'transitionIn'	: 'elastic',
         		'transitionOut'	: 'none'
         	});
         
         	$("a#example5").fancybox();
         
         	$("a#example6").fancybox({
         		'titlePosition'		: 'outside',
         		'overlayColor'		: '#000',
         		'overlayOpacity'	: 0.9
         	});
         
         	$("a#example7").fancybox({
         		'titlePosition'	: 'inside'
         	});
         
         	$("a#example8").fancybox({
         		'titlePosition'	: 'over'
         	});
         
         	$("a[rel=example_group]").fancybox({
         		'padding'		    : '0',
         		'transitionIn'	: 'fade',
         		'transitionOut'	: 'fade',
         		'overlayColor' : '#000',
         		'showNavArrows' : true,
         		'titlePosition'		: 'outside',
         		'overlayOpacity' : 0.7
         
         	});
         
         	/*
         	*   Examples - various
         	*/
         
         	$("#various1").fancybox({
         		'titlePosition'		: 'inside',
         		'transitionIn'		: 'none',
         		'transitionOut'		: 'none'
         	});
         
         	$("#various2").fancybox();
         
         	$("#various3").fancybox({
         		'width'				: '75%',
         		'height'			: '75%',
         		'autoScale'			: false,
         		'transitionIn'		: 'none',
         		'transitionOut'		: 'none',
         		'type'				: 'iframe'
         	});
         
         	$("#various4").fancybox({
         		'padding'			: 0,
         		'autoScale'			: false,
         		'transitionIn'		: 'none',
         		'transitionOut'		: 'none'
         	});
         });
      </script><!-- plugin for twitter display -> http://tweet.seaofclouds.com/ -->
      <!-- I am using envato twitter acount as the demo. Don't forget paste yours -->
      <script type="text/javascript" src="js/tweet.js"></script>
      <script type="text/javascript">
         //settings for the sidebar twitter area
         jQuery(function($){
           $(".twitter").tweet({
             join_text: "auto",
             username: "envato", //!paste here your twitter username!
             count: 3,
             auto_join_text_default: " we said, ",
             auto_join_text_ed: " we ",
             auto_join_text_ing: " we were ",
             auto_join_text_reply: " we replied ",
             auto_join_text_url: " we were checking out ",
             loading_text: "loading tweets..."
           });
         });
         
      </script>
      <!-- Plugin for responsive video -> http://fitvidsjs.com/ -->
      <script src="js/fitvids.js"></script>
      <script>
         $(".container").fitVids();
         $(".container").fitVids({ customSelector: "iframe[src^='http://socialcam.com']"});  
      </script>
      <!-- Script for goolge maps on contact page -->
      <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
      <script src="js/gmaps.js"></script>
      <script type="text/javascript">
         $(function(){
           $('#map').gmap3({
             marker:{
               address: "Haltern am See, Weseler Str. 151" //place Your address here
             },
             map:{
               options:{
                 zoom: 14
               }
             }
           });
         });
      </script>
      <!-- Sequence slider plugin -->
      <script type="text/javascript" src="js/sequence.jquery-min.js"></script>
      <script type="text/javascript">	
         /mobile/i.test(navigator.userAgent) && !location.hash && setTimeout(function () {
           if (!pageYOffset) window.scrollTo(0, 1);
         }, 1000);
         
         $(document).ready(function(){
         	var options = {
         		autoPlay: true,
         		nextButton: true,
         		prevButton: true,
         		animateStartingFrameIn: true,
         		autoPlayDelay: 3000,
         		transitionThreshold: 500
         	};

            var params = {
            'method' : 'GetLoginScreenProjects'
            };

            $.ajax({
               type: "POST",
               url: "server/php/handler.php",
               dataType: "json",
               //url: "/GARMOR/trunk/web/server/php/handler.php",
               data: params,
               success: function(data, statusCode, jqXHRObj){
                  var projects = data;
                  console.log("success");
                  for(i = 0; i < 4 && i<projects.length;  i++){
                     console.log(projects[i]);
                     switch (i){
                        case 0:
                           var projectLink = "portfolio_page.html?id="+projects[i].projectId;
                           var projectTitle = projects[i].projectName;
                           var projectDescription = projects[i].projectDescription;
                           for (j=0; j<projects[i].images.length;j++){
                              if (projects[i].images[j].IsPortrait == "1"){
                                 var projectCover = projects[i].images[j].ImageURL;
                              }
                           }
                           $('#proj1Link').attr('href',projectLink);
                           $('#proj1Src').attr('src', projectCover);
                           $('#proj1Title').html(projectTitle);
                           $('#proj1Desc').html(projectDescription);
                        break;
                        case 1:
                           var projectLink = "portfolio_page.html?id="+projects[i].projectId;
                           var projectTitle = projects[i].projectName;
                           var projectDescription = projects[i].projectDescription;
                           for (j=0; j<projects[i].images.length;j++){
                              if (projects[i].images[j].IsPortrait == "1"){
                                 var projectCover = projects[i].images[j].ImageURL;
                              }
                           }
                           $('#proj2Link').attr('href',projectLink);
                           $('#proj2Src').attr('src', projectCover);
                           $('#proj2Title').html(projectTitle);
                           $('#proj2Desc').html(projectDescription);
                        break;
                        case 2:
                           var projectLink = "portfolio_page.html?id="+projects[i].projectId;
                           var projectTitle = projects[i].projectName;
                           var projectDescription = projects[i].projectDescription;
                           for (j=0; j<projects[i].images.length;j++){
                              if (projects[i].images[j].IsPortrait == "1"){
                                 var projectCover = projects[i].images[j].ImageURL;
                              }
                           }
                           $('#proj3Link').attr('href',projectLink);
                           $('#proj3Src').attr('src', projectCover);
                           $('#proj3Title').html(projectTitle);
                           $('#proj3Desc').html(projectDescription);
                        break;
                        case 3:
                           var projectLink = "portfolio_page.html?id="+projects[i].projectId;
                           var projectTitle = projects[i].projectName;
                           var projectDescription = projects[i].projectDescription;
                           for (j=0; j<projects[i].images.length;j++){
                              if (projects[i].images[j].IsPortrait == "1"){
                                 var projectCover = projects[i].images[j].ImageURL;
                              }
                           }
                           $('#proj4Link').attr('href',projectLink);
                           $('#proj4Src').attr('src', projectCover);
                           $('#proj4Title').html(projectTitle);
                           $('#proj4Desc').html(projectDescription);
                        break;



                     }

                  }
               },
               error: function(error){
                  console.log(error);
               },
               complete: function(){
                  
               }
            });


         
         	var sequence = $("#sequence").sequence(options).data("sequence");
         
         	sequence.afterLoaded = function(){
         		$("#nav").fadeIn(100);
         		$("#nav li:nth-child("+(sequence.settings.startingFrameID)+") img").addClass("active");
         	}
         
         	sequence.beforeNextFrameAnimatesIn = function(){
         		$("#nav li:not(:nth-child("+(sequence.nextFrameID)+")) img").removeClass("active");
         		$("#nav li:nth-child("+(sequence.nextFrameID)+") img").addClass("active");
         	}
         	
         	$("#nav li").click(function(){
         		if(!sequence.active){
         			$(this).children("img").removeClass("active").children("img").addClass("active");
         			sequence.nextFrameID = $(this).index()+1;
         			sequence.goTo(sequence.nextFrameID);
         		}
         	});
         });
      </script>
   </body>
</html>